<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script>
			let processor = {};

			processor.doLoad = function () {
				this.video = document.getElementById('video');
				this.c1 = document.getElementById('c1');
				this.ctx1 = this.c1.getContext('2d');
				this.c2 = document.getElementById('c2');
				this.ctx2 = this.c2.getContext('2d');
				let self = this;
				this.video.addEventListener('play', function() {
						self.width = self.video.videoWidth / 2;
						self.height = self.video.videoHeight / 2;
						self.timerCallback();
					}, false);
			}
			processor.timerCallback = function timerCallback() {
				if (this.video.paused || this.video.ended) {
					return;
				}
				this.computeFrame();
				let self = this;
				setTimeout(function() {
						self.timerCallback();
					}, 0);
			}

			processor.computeFrame = function computeFrame() {
				this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
				let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
				let l = frame.data.length / 4;

				for (let i = 0; i < l; i++) {
					let r = frame.data[i * 4 + 0];
					let g = frame.data[i * 4 + 1];
					let b = frame.data[i * 4 + 2];
					if (g > 100 && r > 100 && b < 43)
						frame.data[i * 4 + 3] = 0;
				}
				this.ctx2.putImageData(frame, 0, 0);
				return;
			}
		</script>
  </head>

  <body onload="processor.doLoad()">
    <div>
      <video id="video" src="html-video-capture.mp4" controls="true"></video>
      <video id="video1" src="canvas-capture-video/html-video-capture.mp4" controls="true"></video>
    </div>
    <div>
      <canvas id="c1" width="320" height="192"></canvas>
      <canvas id="c2" width="320" height="192"></canvas>
    </div>
  </body>
</html>